<template>
  <div class="group-list">
    <div class="search-form">
      <a-form :model="searchForm" layout="inline">
        <a-row :gutter="10">
          <a-col :span="20" style="text-align: right">
            <a-row :gutter="16">
              <a-col :span="6"
                ><a-form-item field="nick" label="群名称">
                  <a-input
                    v-model="searchForm.nick"
                    placeholder="请输入群名称"
                    allow-clear
                    @change="handleSearch"
                  /> </a-form-item
              ></a-col>
              <a-col :span="6"
                ><a-form-item field="tags" label="标签">
                  <a-input
                    v-model="searchForm.tags"
                    placeholder="请输入标签"
                    allow-clear
                    @change="handleSearch"
                  /> </a-form-item
              ></a-col>
              <a-col :span="6"
                ><a-form-item field="issave" label="保存群信息">
                  <a-select
                    v-model="searchForm.issave"
                    placeholder="请选择"
                    allow-clear
                    @change="handleSearch"
                  >
                    <a-option :value="1">开启</a-option>
                    <a-option :value="0">关闭</a-option>
                  </a-select>
                </a-form-item></a-col
              >
              <a-col :span="6"
                ><a-form-item field="isauto" label="自动处理">
                  <a-select
                    v-model="searchForm.isauto"
                    placeholder="请选择"
                    allow-clear
                    @change="handleSearch"
                  >
                    <a-option :value="1">开启</a-option>
                    <a-option :value="0">关闭</a-option>
                  </a-select>
                </a-form-item></a-col
              >
            </a-row>
          </a-col>
          <a-col flex="88px" style="text-align: right">
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button style="margin-left: 8px" @click="handleReset"
                  >重置</a-button
                >
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 对话布局 -->
    <a-row :gutter="16">
      <a-col :span="4">
        <a-tabs type="card-gutter" default-active-key="1">
          <a-tab-pane key="1" title="最新">
            <grouplistChat
              :selectedWxid="props.selectedWxid"
              :selectedAvatar="props.selectedAvatar"
              :searchForm="searchForm"
            />
          </a-tab-pane>
          <a-tab-pane key="2" title="所有群">
            <grouplistAll
              :selectedWxid="props.selectedWxid"
              :selectedAvatar="props.selectedAvatar"
              :searchForm="searchForm"
            />
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :span="14">
        <roomMsg
          :selectedWxid="props.selectedWxid"
          :selectedAvatar="props.selectedAvatar"
        ></roomMsg>
      </a-col>
      <!-- 配置区 -->
      <a-col :span="6">
        <GroupConfig :selectedWxid="props.selectedWxid"/>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import roomMsg from './room-msg-table.vue';
  import grouplistChat from './grouplist-chat.vue';
  import grouplistAll from './grouplist-all.vue';
  import GroupConfig from './group-config.vue';

  const props = defineProps<{
    selectedWxid: string;
    selectedAvatar: string;
  }>();

  interface groupItem {
    wxid: string;
    nick: string;
    avatarMinUrl?: string;
    sex?: boolean;
    remark?: string;
    wxNum?: string;
  }
  interface SearchForm {
  nick: string;
  issave: boolean | undefined;
  isauto: boolean | undefined;
  tags: string;
}
  const emit = defineEmits<{
    (e: 'refreshgroupList', searchForm: SearchForm): void;
  }>();
  const current = ref(1);
  const currentWxid = ref('');
  const currentgroup = ref<groupItem | null>(null);
  // const chatMessages = ref([]);
  const myAvatar = ref(''); // 当前用户头像

  // 搜索表单数据
  const searchForm = ref({
    nick: '',
    issave: undefined,
    isauto: undefined,
    tags: '',
  });
  // 搜索处理
  const handleSearch = () => {
    emit('refreshgroupList', searchForm.value);
  };

  // 重置搜索
  const handleReset = () => {
    searchForm.value = {
      nick: '',
      issave: undefined,
      isauto: undefined,
      tags: '',
    };
    current.value = 1;
  };

  // 监听wxid变化获取好友列表
  watch(
    () => props.selectedWxid,
    async (newVal) => {
      if (newVal) {
        currentWxid.value = newVal;
      }
    },
    { immediate: true }
  );
</script>

<style scoped>
  .search-form {
    padding: 16px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
  }

  :deep(.arco-form-item-layout-inline) {
    margin-right: 16px;
    margin-bottom: 16px;
  }

  .group-list .selected {
    background-color: var(--color-fill-2);
  }
</style>
